

<script>
// <template>
//   <div>
//     <NameSlot>
//       <div slot="header">This is parent header.</div>
//       哈哈
//       <el-popover
//         placement="top-start"
//         title="标题"
//         width="200"
//         trigger="hover"
//         content="这是一段内容,这是一段内容,这是一段内容,这是一段内容。"
//       >
//         <!-- <el-button slot="reference">hover 激活</el-button> -->
//         <div slot="reference">hover 激活</div>
//       </el-popover>
//       <div slot="footer">This is parent footer.</div>
//     </NameSlot>
//   </div>
// </template>
// <template>
//   <div>
//     <NameSlot>
//       <div slot="header">This is parent header.</div>
//       哈哈
//       <div slot="footer">This is parent footer.</div>
//     </NameSlot>
//   </div>
// </template>
import NameSlot from "@/components/slot/NameSlot";

export default {
  components: {
    NameSlot,
  },
  render() {
    return (
      <NameSlot
        {...{
          scopedSlots: {
            header: () => <div>This is parent header.</div>,
            default: () => (
              <el-popover
                placement="top-start"
                title="标题"
                width="200"
                trigger="hover"
                content="这是一段内容,这是一段内容,这是一段内容,这是一段内容。"
              >
                <div slot="reference">hover 激活</div>
              </el-popover>
            ),
            footer: () => <div>This is footer header.</div>,
          },
        }}
      ></NameSlot>
    );
  },
};
</script>